import React, { useState } from "react";
import { Button, Modal } from "antd";
import { ProDescriptions } from "@ant-design/pro-components";
import DictTag, { DictValueEnum } from "@/components/DictTag";

const App: React.FC<{
	open: boolean;
	statusOptions: DictValueEnum;
	onClose: () => void;
	dataSource: any;
}> = ({ open = false, onClose = () => {}, dataSource = {}, statusOptions }) => {
	return (
		<>
			<Modal title="详情" width={850} open={open} onCancel={onClose}>
				<ProDescriptions<any>
					column={1}
					bordered
					dataSource={dataSource}
					emptyText={"空"}
					columns={[
						{
							title: "用户账号",
							dataIndex: "userName",
							valueType: "text"
						},
						{
							title: "IP地址",
							dataIndex: "ipaddr",
							valueType: "text"
						},
						{
							title: "登录地点",
							dataIndex: "loginLocation",
							valueType: "text",
							hideInSearch: true
						},
						{
							title: "登录设备",
							dataIndex: "browser",
							valueType: "text",
							hideInSearch: true
						},
						{
							title: "操作系统",
							dataIndex: "os",
							valueType: "text",
							hideInSearch: true,
							ellipsis: true
						},
						{
							title: "状态",
							dataIndex: "status",
							valueType: "select",
							valueEnum: statusOptions,
							render: (_, record) => {
								// @ts-ignore
								return <DictTag enums={statusOptions} type="tag" value={record.status} />;
							}
						},
						{
							title: "消息提示",
							dataIndex: "msg",
							valueType: "text",
							hideInSearch: true,
							ellipsis: true
						},
						{
							title: "登录时间",
							dataIndex: "loginTime",
							valueType: "dateTime"
						}
					]}
				/>
			</Modal>
		</>
	);
};

export default App;
